<script setup>
import {ref} from "vue";
import {onMounted, onUpdated, onBeforeMount, onBeforeUpdate, onBeforeUnmount, onUnmounted} from "vue";

let name = ref('zhangsan')
let num = ref(0)

/*
    1.生命周期 执行顺序 onBeforeMount onMounted
     当发生更新时 先执行onBeforeUpdate  再执行onUpdated
    2. 当没有执行onMounted 页面中的元素不存在的 只是发生在内存中创建
    当没有执行onUpdated 只是在内存中进行修改 ，没有在页面中发生修改
    3.vue2中的创建过程 被vue3的setup函数替代了

 */


onMounted(() => {
  console.log("------------onMounted-------------")
  console.log("name是否存在：", name.value)
  console.log("num是否存在：", num.value)
  console.log("当前dom元素是否加载：", document.getElementById("num"))
  console.log("当前dom元素的值是否渲染：", document.getElementById("num").innerText)

})

onUpdated(() => {
  console.log("------------onUpdated-------------")
  console.log("name是否存在：", name.value)
  console.log("num是否存在：", num.value)
  console.log("当前dom元素是否加载：", document.getElementById("num"))
  console.log("当前dom元素的值是否渲染：", document.getElementById("num").innerText)

})

onBeforeMount(() => {
  console.log("------------onBeforeMount-------------")
  console.log("name是否存在：", name.value)
  console.log("num是否存在：", num.value)
  console.log("当前dom元素是否加载：", document.getElementById("num"))
  if (document.getElementById("num") === null) {
    console.log("document.getElementById(\"num\")= null")
  } else {
    console.log("当前dom元素的值是否渲染：", document.getElementById("num").innerText)
  }
})

onBeforeUpdate(() => {
  console.log("------------onBeforeUpdate-------------")
  console.log("name是否存在：", name.value)
  console.log("num是否存在：", num.value)
  console.log("当前dom元素是否加载：", document.getElementById("num"))
  console.log("当前dom元素的值是否渲染：", document.getElementById("num").innerText)

})


</script>

<template>
  <span id="num">{{ num }}</span>
  <button @click="num++">add 1</button>
  <h1>{{ name }}, {{ num }}</h1>


</template>


<style scoped>

</style>
